<template>
    <Header></Header>

    <!-- 主内容区域 -->
    <main class="container max-w-screen-xl mx-auto p-4">
        <!-- grid 表格布局，分为 5 列 间隔4-->
        <div class="grid grid-cols-4 gap-4">
            <!-- 右边侧边栏，占用一列 -->
            <aside class="col-span-4 md:col-span-1 hidden md:block">
                <div class="sticky -top-96">
                    <!-- 博主信息 -->
                    <UserInfoCard></UserInfoCard>
                    <!-- 分类 -->
                    <CategoryListCard></CategoryListCard>
                    <!-- 标签 -->
                    <TagListCard></TagListCard>
                </div>
            </aside>

            <!-- 左边栏，占用 3 列 -->
            <div v-loading="contentLoading" element-loading-text="努力加载中..."
                class="col-span-4 md:col-start-2  md:col-span-3 mb-3">
                <!-- 文章列表，grid 表格布局，分为 1 列 -->
                <div class="grid grid-cols-1 gap-3">
                    <div v-for="(wiki, index) in wikis" :key="index"
                        class="col-span-1  animate__animated animate__fadeInUp">

                        <!-- 如果屏幕是手机端则改变样式 -->
                        <div v-if="index % 2 == 0 || isMobile"
                            class="rounded-xl lg:flex lg:items-center bg-white shadow-md dark:bg-gray-900 hover:shadow-lg hover:translate-x-px hover:translate-y-px">
                            <div v-if="wiki.isTop && !isMobile" class="absolute top-0 right-0 ">
                                <svg-icon name="pattern" class="w-12 h-12 -rotate-90 stroke-current text-red-500"
                                    aria-hidden="true"></svg-icon>
                            </div>
                            <div v-else-if="wiki.isTop && isMobile" class="absolute right-0 bottom-3">
                                <svg-icon name="pattern" class="w-12 h-12 stroke-current text-red-500"
                                    aria-hidden="true"></svg-icon>
                            </div>
                            <!-- 图片 -->
                            <el-image class="object-cover w-full lg:m-3 lg:w-5/12  rounded-xl h-48 lg:h-48 shadow-inner"
                                :src="wiki.cover" alt="" @click="goWikiArticleDetailPage(wiki.id, wiki.firstArticleId)">
                                <template #error>
                                    <div class=" flex items-center w-full h-full justify-center">
                                        <el-icon :size="50"><icon-picture /></el-icon>
                                    </div>
                                </template>
                            </el-image>

                            <div class=" lg:mt-4 lg:w-7/12  m-3 grid justify-items-center ">
                                <!-- 标题 -->
                                <a @click="goWikiArticleDetailPage(wiki.id, wiki.firstArticleId)"
                                    class="cursor-pointer">
                                    <h2 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
                                        {{ wiki.title }}</h2>
                                </a>
                                <!-- 简介 -->
                                <p class="mt-3 text-sm text-gray-500 md:text-sm max-h-16 dark:text-gray-400 text-ellipsis overflow-hidden"
                                    style="word-wrap: break-word;">
                                    {{ wiki.summary }}
                                </p>
                            </div>

                        </div>

                        <div v-else
                            class="rounded-xl lg:flex lg:items-center bg-white shadow-md dark:bg-gray-900 hover:shadow-lg hover:translate-y-px hover:translate-x-px">
                            <div v-if="wiki.isTop" class="absolute  top-0">
                                <svg-icon name="pattern" class="w-12 h-12 rotate-180 stroke-current text-red-500"
                                    aria-hidden="true"></svg-icon>
                            </div>

                            <div class="lg:mt-4 lg:w-7/12  m-3 grid justify-items-center ">

                                <!-- 标题 -->
                                <a @click="goWikiArticleDetailPage(wiki.id, wiki.firstArticleId)"
                                    class="cursor-pointer">
                                    <h2 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
                                        {{ wiki.title }}</h2>
                                </a>
                                <!-- 简介 -->
                                <p class="mt-3 text-sm text-gray-500 md:text-sm max-h-16 dark:text-gray-400 text-ellipsis overflow-hidden"
                                    style="word-wrap: break-word;">
                                    {{ wiki.summary }}
                                </p>


                            </div>
                            <!-- 图片 -->
                            <el-image class="object-cover w-full lg:m-3 lg:w-5/12  rounded-xl h-48 lg:h-48 shadow-inner"
                                :src="wiki.cover" alt="" @click="goWikiArticleDetailPage(wiki.id, wiki.firstArticleId)">
                                <template #error>
                                    <div class="flex items-center w-full h-full justify-center">
                                        <el-icon :size="50"><icon-picture /></el-icon>
                                    </div>
                                </template>
                            </el-image>

                        </div>
                    </div>
                </div>

            </div>


            <!-- 右边侧边栏，占用一列 -->
            <aside class="col-span-4  md:hidden block">
                <div class="sticky top-20">
                    <!-- 博主信息 -->
                    <UserInfoCard></UserInfoCard>


                    <!-- 分类 -->
                    <CategoryListCard></CategoryListCard>


                    <!-- 标签 -->
                    <TagListCard></TagListCard>
                </div>
            </aside>
        </div>

    </main>
    <Footer> </Footer>
</template>

<script setup>
import Header from '@/layouts/frontend/components/Header.vue'
import Footer from '@/layouts/frontend/components/Footer.vue'
import UserInfoCard from '@/layouts/frontend/components/UserInfoCard.vue'
import TagListCard from '@/layouts/frontend/components/TagListCard.vue'
import CategoryListCard from '@/layouts/frontend/components/CategoryListCard.vue'
import ScrollToTopButton from '@/layouts/frontend/components/ScrollToTopButton.vue'
import { getWikiList } from '@/api/frontend/wiki'
import { ref } from 'vue'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

let isMobile = false
//绑定element-plus加载组件
const contentLoading = ref(true)
// 知识库
const wikis = ref([])
getWikiList().then(res => {
    if (res.success) {
        wikis.value = res.data
    }
}).finally(() => {
    contentLoading.value = false
})


var width = window.innerWidth || document.documentElement.clientWidth;
console.log('屏幕宽度：' + width)
// 在这里根据屏幕尺寸执行相应的操作
if (width < 768) {
    // 屏幕宽度小于 768px 时执行
    console.log('屏幕宽度小于 768px 时执行')
    isMobile = true
}

// 跳转文章详情页
const goWikiArticleDetailPage = (wikiId, articleId) => {
    console.log('跳转' + wikiId + ',' + articleId)
    router.push({ path: '/wiki/' + wikiId, query: { articleId } })
}

</script>